<template>
    <br>
    <a-button type="primary" @click="showCreateModel = true">
        <template #icon>
            <PlusOutlined />
        </template>
        创建题目
    </a-button>
    <br><br>
    <div class="TopicList" v-for="(item, index) in TopicList">
        <a-collapse v-model:activeKey="activeKey" destroyInactivePanel>
            <a-collapse-panel :key="index">
                <template #header>
                    <span class="item title">{{ item.title }}</span>
                </template>
                <template #extra>
                    <a-button type="primary" size="small" style="float: right;" @click.stop="LookAtTopic(item)">查看题目
                    </a-button>
                </template>
                <TopicTable v-if="activeKey.includes(index.toString())" :id="item.id" @LookAtCode="LookAtCode" />
            </a-collapse-panel>
        </a-collapse>
    </div>
    <a-modal v-model:visible="showCreateModel" title="创建题目" :footer="null" destroyOnClose>
        <CreateTopicVue @CloseModel="CloseModel" />
    </a-modal>
    <topicHistroyVue v-model:show="HistroyStatus" :Status="TopicData" v-if="HistroyStatus" />
    <InspectVue v-model:show="InspectStatus" :Status="InspectData" @SetValue="SetValue" @SaveCode="SaveCode"
        @BackStatus="BackStatus" v-if="InspectStatus" />
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import { nextTick, ref } from 'vue';
import { notification } from 'ant-design-vue'
import CreateTopicVue from './CreateTopic.vue';
import topicHistroyVue from './topicHistroy.vue';
import InspectVue from './inspect.vue'
import TopicTable from './TopicTable.vue'
import Admin from '@/apis/admin'

const showCreateModel = ref(false);

const activeKey = ref<any[]>([]);

const HistroyStatus = ref(false);
const InspectStatus = ref(false);


const CloseModel = () => {
    showCreateModel.value = false;
    GetTopics();
}

const InspectData = ref<AdminInspectTable>({
    key: '',
    id: '',
    Code: '',
    inspectA: 0,
    inspectB: 0,
    inspectC: 0,
    inspectD: 0,
    inspectE: 0,
    total: 0,
    title: '',
    topicId: '',
    updateTime: 0,
    submitTime: 0,
    scoreTime: 0,
    imagePath: '',
    draft: 0,
    nickname: '',
})

const SetValue = (data: any) => {
    InspectData.value.inspectA = data.inspectA;
    InspectData.value.inspectB = data.inspectB;
    InspectData.value.inspectC = data.inspectC;
    InspectData.value.inspectD = data.inspectD;
    InspectData.value.inspectE = data.inspectE;
    InspectData.value.total = data.total;
    GetTopics();
}

const TopicData = ref<TopicStatus>({
    codeContent: '',
    description: '',
    id: '',
    imagePath: '',
    title: '',
    updateTime: 0,
})

const TopicList = ref<TopicStatus[]>([]);
const LookAtTopic = (item: TopicStatus) => {
    TopicData.value = item;
    HistroyStatus.value = true;
}

let TopicListMapping: { [key: string]: any } = {};

const GetTopics = () => {
    TopicList.value = [];
    Admin.GetTopics().then((res: any) => {
        TopicListMapping = {};
        TopicList.value = res;
        for (let i = 0; i < res.length; i++) {
            const element = res[i];
            TopicListMapping[element.id] = element;
        }
    })
}

GetTopics();
const LookAtCode = (item: any) => {
    var Topic = TopicListMapping[item.topicId];
    var imagePath = Topic.imagePath;
    var title = Topic.title;
    InspectData.value = {
        ...item,
        imagePath,
        title,
    };
    nextTick(() => {
        InspectStatus.value = true;
    });
}

const BackStatus = () => {
    Admin.BackInspectStatus({ id: InspectData.value.id }).then((res: any) => {
        nextTick(() => {
            notification.success({ message: '退回成功' });
            InspectStatus.value = false;
            GetTopics();
        });
    });
}

const SaveCode = (Code: string) => {
    Admin.SaveCode({ id: InspectData.value.id, Code: Code, }).then((res: any) => {
        nextTick(() => {
            notification.success({ message: '保存成功' });
        });
    });
}

</script>
<style scoped>
.item {
    padding: 0 10px 0 0;
    vertical-align: middle;
}

.title {
    vertical-align: middle;
}

.TopicList {
    margin-bottom: 10px;
    user-select: none;
}
</style>